<template>
	<view class="contain">
		<view v-if="!islogin || attentionList.length <= 0">
			<view class="banner col">
				<view class="top">关注趣读财经专家解读</view>
				<view class="bottom">您的投资理财指南</view>
			</view>
			<view class="attention">
				<view class="attention-text">您可能感兴趣的栏目</view>
				<view class="attention-list">
					<view class="attention-item col_center" v-for="(item, index) in attentionList" :key="index">
						<view class="head"><image :src="item.headImg" mode="aspectFill"></image></view>
						<view class="body row_center">
							<view class="text">{{ item.title }}</view>
							<view class="iocn" v-if="item.iocn"><image :src="item.iocn" mode="aspectFill"></image></view>
						</view>
						<view class="foot-no row_center" v-if="item.isgz == 0" @tap="togz(item)">
							<image src="../../../static/img/jiahao.png" mode="aspectFill"></image>
							<view class="text">关注</view>
						</view>
						<view class="foot-yes" v-else @tap="togz(item)">已关注</view>
					</view>
				</view>
			</view>
			<view class="buttom" @tap="attentionMi">开启我的关注</view>
		</view>
		<view v-else>
			<view class="title_wrap row_between" v-if="attentionList.length >= 3">
				<view class="wrap-left row">
					<!-- <image src="/static/img/guanz_tuij.png" mode="aspectFill"></image> -->
					<view class="text">推荐关注</view>
				</view>
				<view class="wrap-rigth row" @tap="toDetail(1)">
					<view class="text">全部</view>
					<view class="uni-icon uni-icon-arrowright arrowright" />
				</view>
			</view>
			<scroll-view class="guanz-list" scroll-x v-if="attentionList.length >= 3">
				<view class="scoll-wrapper">
					<view class="guanz-item col_center" v-for="(item, index) in attentionList" :key="index" v-if="index<5">
						<view class="guanz-head"><image :src="item.headImg" mode="aspectFill"></image></view>
						<view class="guanz-body row_center">
							<view class="guanz-text">{{ item.title }}</view>
							<view class="guanz-iocn" v-if="item.iocn"><image :src="item.iocn" mode="aspectFill"></image></view>
						</view>
						<view class="guanz-foot row_center" v-if="item.isgz == 0" @tap="togz(item)">
							<image src="../../../static/img/jiahao.png" mode="aspectFill"></image>
							<view class="guanz-text">关注</view>
						</view>
						<view class="foot-yes" v-else @tap="togz(item)">已关注</view>
					</view>
				</view>
			</scroll-view>

			<view class="title_wrap row_between">
				<view class="wrap-left row">
					<!-- <image src="/static/img/guanz_wde.png" mode="aspectFill"></image> -->
					<view class="text">我的关注</view>
				</view>
				<view class="wrap-rigth row" @tap="toDetail(0)">
					<view class="text">{{ guanzCount }}</view>
					<view class="uni-icon uni-icon-arrowright arrowright" />
				</view>
			</view>
			<view class="gray-row"></view>
			<view class="title_wrap row_between">
				<view class="wrap-left row">
					<!-- <image src="/static/img/iguanz_zx.png" mode="aspectFill"></image> -->
					<view class="text">我的资讯</view>
				</view>
				<view class="wrap-rigth row"></view>
			</view>
			<div class="zixun_list">
				<div class="item_wrap row_between" @tap="goToH5(zixunList[index].newsUrl)" v-for="(item, index) in zixunList" :key="index">
					<div class="col_between content_wrap">
						<span class="title">{{ item.title }}</span>
						<div class="row_between" style="width: 100%; margin-top: 0upx; font-size: 24upx;">
							<span>{{ item.publishDateStr }}</span>
							<span>{{ item.viewCount }}阅读</span>
						</div>
					</div>
					<image :src="item.picUrl" mode="aspectFill" class="image"></image>
					<image src="../../../static/img/default_icon.png" mode="aspectFill" class="default_image"></image>
				</div>

				<view class="uni-tab-bar-loading" v-if="!isShowError"><uni-load-more :loadingType="loadingType" :contentText="loadingText"></uni-load-more></view>

				<div class="col_center wrap" v-if="isShowError">
					<image src="../../../static/img/server_error.png" mode="widthFix"></image>
					<span>页面请求失败～</span>

					<button class="btn" @click="reloadFunc">重新加载</button>
				</div>
			</div>
		</view>
	</view>
</template>

<script>
const util = require('../../../utils/util.js');
import uniLoadMore from '@/components/uni-load-more.vue';
export default {
	components: { uniLoadMore },

	data() {
		return {
			islogin: true,
			attentionList: [],
			guanzCount: 5,
			isShowError: false,
			loadingText: {
				contentdown: '上拉显示更多',
				contentrefresh: '正在加载...',
				contentnomore: '没有更多数据了'
			},
			loadingType: 1,
			datas: [
				{ id: '1', headImg: '/static/img/login_head.png', title: '趣读君', iocn: '/static/img/VET.png', isgz: 0 },
				{ id: '2', headImg: '/static/img/login_head.png', title: '宏观经济', iocn: '', isgz: 0 },
				{ id: '3', headImg: '/static/img/login_head.png', title: '中国财经故事', iocn: '', isgz: 1 },
				{ id: '4', headImg: '/static/img/login_head.png', title: '趣读君', iocn: '/static/img/VET.png', isgz: 0 },
				{ id: '5', headImg: '/static/img/login_head.png', title: '宏观经济', iocn: '', isgz: 1 },
				{ id: '6', headImg: '/static/img/login_head.png', title: '中国财经故事', iocn: '/static/img/VET.png', isgz: 0 },
				{ id: '7', headImg: '/static/img/login_head.png', title: '趣读君', iocn: '', isgz: 1 },
				{ id: '8', headImg: '/static/img/login_head.png', title: '宏观经济', iocn: '', isgz: 0 }
			],
			zixunList: [
				{
					newsUrl: 'http://www.91fld.com/news/financial/611.html',
					picUrl: 'http://static.91fld.com/dev/image/newsimages/o_1dlhahtcgvasiimok61i5s7s38.jpg',
					publishDateStr: '2天前',
					publishLong: 1569318306000,
					title: '最新！珠海警方通报“新玉猫国际”平台涉非法集资遭立案',
					viewCount: 2
				},
				{
					newsUrl: 'http://www.91fld.com/news/financial/610.html',
					picUrl: 'http://static.91fld.com/dev/image/newsimages/o_1dlhae34q1uvkg7ikp61qqcee18.jpg',
					publishDateStr: '2天前',
					publishLong: 1569318180000,
					title: '百行征信回应：与各股东方保持良好合作关系',
					viewCount: 3
				},
				{
					newsUrl: 'http://www.91fld.com/news/fund/609.html',
					picUrl: 'http://static.91fld.com/dev/image/newsimages/o_1dlha9tah10h11n70ihg18nai8j8.jpg',
					publishDateStr: '2天前',
					publishLong: 1569318043000,
					title: '公募规模逼近14万亿 这两类基金又火了',
					viewCount: 1
				},
				{
					newsUrl: 'http://www.91fld.com/news/fund/608.html',
					picUrl: 'http://static.91fld.com/dev/image/newsimages/o_1dlgs5904hae13lo1hrgr13sg58.jpg',
					publishDateStr: '3天前',
					publishLong: 1569303211000,
					title: '超30%百亿私募以逾八成仓位运作 估值修复行情将继续',
					viewCount: 1
				},
				{
					newsUrl: 'http://www.91fld.com/news/financial/607.html',
					picUrl: 'http://static.91fld.com/dev/image/newsimages/o_1dlgrudk21h78147ajq1nl51d958.jpg',
					publishDateStr: '3天前',
					publishLong: 1569302987000,
					title: '基金齐声唱多:黄金上涨仍在路上',
					viewCount: 3
				},
				{
					newsUrl: 'http://www.91fld.com/news/macro/606.html',
					picUrl: 'http://static.91fld.com/dev/image/newsimages/o_1dlgmdp8i2kn1pokmt9mv170u8.jpg',
					publishDateStr: '3天前',
					publishLong: 1569297198000,
					title: '中国要不要降息？刚刚，易纲回应了',
					viewCount: 5
				},
				{
					newsUrl: 'http://www.91fld.com/news/macro/605.html',
					picUrl: 'http://static.91fld.com/dev/image/newsimages/o_1dlgj6qq760d1ep6930at6leu8.jpg',
					publishDateStr: '3天前',
					publishLong: 1569293825000,
					title: '欧元区缺乏明显经济复苏迹象 欧洲央行随时准备再降息',
					viewCount: 0
				},
				{
					newsUrl: 'http://www.91fld.com/news/financial/604.html',
					picUrl: 'http://static.91fld.com/dev/image/newsimages/o_1dlgj1rfd1k0katgn85spi9t28.jpg',
					publishDateStr: '3天前',
					publishLong: 1569293662000,
					title: '限额缩水 禁止透支：信用卡涉房交易监管步步升级',
					viewCount: 5
				},
				{
					newsUrl: 'http://www.91fld.com/news/fund/603.html',
					picUrl: 'http://static.91fld.com/dev/image/newsimages/o_1dlgh6hdm1h2j1u5opu61q0h43c8.jpg',
					publishDateStr: '3天前',
					publishLong: 1569291718000,
					title: '“金主”频频发力 ETF再迎巨无霸',
					viewCount: 1
				},
				{
					newsUrl: 'http://www.91fld.com/news/fund/602.html',
					picUrl: 'http://static.91fld.com/dev/image/newsimages/o_1dlgh034jelm136p1o0h1mlhgmd8.jpg',
					publishDateStr: '3天前',
					publishLong: 1569291520000,
					title: '央企创新驱动ETF受追捧 4基金合计募资超400亿',
					viewCount: 0
				}
			]
		};
	},
	methods: {
		attentionMi() {
			if (!this.islogin) {
				uni.navigateTo({
					url: '/pages/get_code/get_code'
				});
			} else if (this.attentionList.length <= 0) {
				uni.showToast({
					title: '请先关注一个栏目'
				});
			} else {
				this.islogin = true;
			}
		},
		goToH5: function(url) {
			if (this.getUrlQueryString(url, 'needlogin') == 1) {
				// 需要登录
				let auth_token = uni.getStorageSync('auth_token');
				if (auth_token) {
					// 可以登录
					if (this.getUrlQueryString(url, 'hidehead') == 1) {
						// 需要隐藏头
						uni.setStorageSync('couponUrl', url);
						console.log(url);
						uni.navigateTo({
							url: '/pages/tixian_webview/tixian_webview?url=' + url
						});
					} else {
						uni.navigateTo({
							url: '/pages/home_webview/home_webview?url=' + url
						});
					}
				} else {
					uni.navigateTo({
						url: '/pages/get_code/get_code'
					});
				}
			} else {
				// 不需要登录
				if (this.getUrlQueryString(url, 'hidehead') == 1) {
					// 需要隐藏头
					uni.setStorageSync('couponUrl', url);
					console.log(url);
					uni.navigateTo({
						url: '/pages/tixian_webview/tixian_webview?url=' + url
					});
				} else {
					uni.navigateTo({
						url: '/pages/home_webview/home_webview?url=' + url
					});
				}
			}
		},
		getUrlQueryString(url, name) {
			var reg = new RegExp('[?&]' + name + '=([^&#]*)', 'i');
			var res = url.match(reg);

			if (res && res.length > 1) {
				return decodeURIComponent(res[1]);
			}
			return '';
		},
		toDetail(n) {
			uni.navigateTo({
				url: '../../attention_detail/attention_detail?current=' + n
			});
		},
		togz(e) {
			if (!this.islogin) {
				uni.navigateTo({
					url: '/pages/get_code/get_code'
				});
			}
			let len = this.datas.length;
			for (let i = 0; i < len; i++) {
				if (e.id == this.datas[i].id) {
					this.datas[i].isgz = !this.datas[i].isgz;
					break;
				}
			}
		},
		reloadFunc(){
			this.publishLong = 0;
			// this.newsList('', this.typeIndex);
			uni.showLoading({
				title:"加载中..."
			});
			setTimeout(()=>{
				uni.hideLoading();
			}, 10000);
			this.homeConfig();
			this.homeData();
			this.upgrade();
		}
	},
	onLoad() {
		this.attentionList = this.datas;
	}
};
</script>

<style lang="scss">
.banner {
	width: 100%;
	height: 229upx;
	padding-top: 20upx;
	.top {
		font-size: 56upx;
		font-family: FZZongYi-M05S;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		line-height: 1;

		background: linear-gradient(0deg, rgba(86, 106, 255, 1) 0%, rgba(114, 45, 255, 1) 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}
	.bottom {
		text-align: center;
		width: 416upx;
		font-weight: 500;
		font-size: 36upx;
		line-height: 1;
		color: #ffffffff;
		margin-top: 29upx;
		background: rgba(114, 45, 255, 1);
	}
}
.attention {
	width: 100%;
	.attention-text {
		text-align: center;
		font-size: 36upx;
		color: #010101;
		font-weight: bold;
		line-height: 1;
		margin-top: 26upx;
	}
	.attention-list {
		margin: 17upx 80upx;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		.attention-item {
			width: 240upx;
			height: 307upx;
			margin: 15upx 26upx;
			background: rgba(255, 255, 255, 1);
			box-shadow: 0upx 3upx 20upx 0upx rgba(190, 198, 204, 0.3);
			border-radius: 8upx;
			.head {
				image {
					width: 100upx;
					height: 100upx;
				}
			}
			.body {
				margin-top: 23upx;
				.text {
					font-size: 30upx;
					line-height: 1;
				}
				.iocn {
					width: 30upx;
					height: 30upx;
					line-height: 1;
					image {
						width: 30upx;
						height: 30upx;
					}
				}
			}
			.foot-no {
				width: 120upx;
				height: 42upx;
				background: rgba(255, 202, 10, 1);
				border-radius: 6upx;
				margin-top: 19upx;
				text-align: center;
				image {
					width: 23upx;
					height: 23upx;
				}
				.text {
					font-size: 26upx;
					line-height: 1;
					font-size: 26upx;
					font-weight: bold;
					margin-left: 9upx;
				}
			}
		}
	}
}
.foot-yes {
	width: 120upx;
	height: 42upx;
	border-radius: 6upx;
	text-align: center;
	background: #cccccc;
	color: #ffffff;
	font-size: 26upx;
	font-weight: bold;
	margin-top: 19upx;
}
.buttom {
	width: 504upx;
	height: 154upx;
	background-image: url('../../../static/img/guanz_ann.png');
	background-size: 100%;
	position: fixed;
	left: 123upx;
	/* #ifdef H5 */
	bottom: 100upx;
	/* #endif */
	/* #ifdef APP-PLUS */
	bottom: 0upx;
	/* #endif */
	z-index: 1;
	font-size: 32upx;
	font-weight: bold;
	text-align: center;
	line-height: 136upx;
}
.guanz-list {
	white-space: nowrap;
}
.scoll-wrapper {
	display: -webkit-box;
	.guanz-item {
		width: 240upx;
		height: 307upx;
		margin: 15upx 0upx 30upx 10upx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0upx 3upx 20upx 0upx rgba(190, 198, 204, 0.3);
		border-radius: 8upx;
		.guanz-head {
			image {
				width: 100upx;
				height: 100upx;
			}
		}
		.guanz-body {
			margin-top: 23upx;
			.guanz-text {
				font-size: 30upx;
				line-height: 1;
			}
			.guanz-iocn {
				width: 30upx;
				height: 30upx;
				line-height: 1;
				image {
					width: 30upx;
					height: 30upx;
				}
			}
		}
		.guanz-foot {
			width: 120upx;
			height: 42upx;
			background: rgba(255, 202, 10, 1);
			border-radius: 6upx;
			margin-top: 19upx;
			text-align: center;
			image {
				width: 23upx;
				height: 23upx;
			}
			.guanz-text {
				font-size: 26upx;
				line-height: 1;
				font-size: 26upx;
				font-weight: bold;
				margin-left: 9upx;
			}
		}
	}
}
.title_wrap {
	height: 90upx;
	margin: 0upx 29upx;
	.wrap-left {
		image {
			width: 36upx;
			height: 36upx;
		}
		.text {
			font-size: 36upx;
			font-weight: bold;
			line-height: 1;
			// margin-left: 10upx;
		}
	}
	.wrap-rigth {
		color: rgba(153, 153, 153, 1);
		.text {
			font-size: 30upx;
			font-weight: 500;
		}
		.arrowright {
			font-size: 40upx;
			width: 30upx;
		}
	}
}
.gray-row {
	height: 20upx;
	background: rgba(245, 245, 245, 1);
}
.zixun_list {
	margin-bottom: 0upx;
	background: #ffffff;
	padding: 0upx 30upx;
}
.zixun_list .item_wrap {
	height: 180upx;
	width: 100%;
	box-sizing: border-box;
}
.zixun_list .item_wrap .content_wrap {
	height: 140upx;
	flex: 1;
	color: #999999;
	font-size: 16upx;
	line-height: 1;
}
.zixun_list .item_wrap .content_wrap .title {
	color: #303030;
	font-size: 32upx;
	font-weight: bold;
	line-height: 1.3;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.zixun_list .item_wrap .image {
	height: 130upx;
	width: 180upx;
	position: relative;
	z-index: 2;
	margin-left: 27upx;
	min-height: 130upx;
	min-width: 180upx;
}
.zixun_list .item_wrap .default_image {
	height: 130upx;
	width: 180upx;
	position: absolute;
	right: 0upx;
	margin-left: 27upx;
	min-height: 130upx;
	min-width: 180upx;
	position: absolute;
	right: 30upx;
}
.btn{height: 94upx; line-height: 94upx; width: 236upx; background: #FFCA0A; border-radius: 12upx;
	text-align: center; color: #303030; font-size: 36upx; margin-top: 70upx;font-weight: bold;}
</style>
